<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
    <!-- 添加基本样式以美化登录界面 -->
    <style>
        /* 设置全局样式，调整字体、背景颜色，并将内容居中 */
        body {
            font-family: Arial, sans-serif; /* 设置页面字体为Arial */
            background-color: #f4f4f9; /* 背景颜色为浅灰色 */
            display: flex; /* 使用Flexbox使页面内容居中 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            height: 100vh; /* 高度设为视口高度，使其全屏 */
            margin: 0; /* 去除默认的页面边距 */
        }

        /* 表单样式 */
        form {
            background-color: #fff; /* 设置表单背景为白色 */
            padding: 20px; /* 表单内部的边距 */
            border-radius: 8px; /* 圆角效果 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
            width: 300px; /* 表单的固定宽度 */
        }

        /* 文本输入框和密码输入框的样式 */
        input[type="text"], input[type="password"] {
            width: 93%; /* 输入框宽度为100%，与表单宽度一致 */
            padding: 10px; /* 输入框的内部边距 */
            margin: 10px 0; /* 输入框上下的外边距 */
            border: 1px solid #ccc; /* 输入框的边框颜色为浅灰 */
            border-radius: 4px; /* 圆角效果 */
        }

        /* 提交按钮的样式 */
        input[type="submit"] {
            width: 100%; /* 按钮宽度为100%，与表单宽度一致 */
            padding: 10px; /* 按钮的内部边距 */
            background-color: #4CAF50; /* 按钮背景颜色为绿色 */
            color: white; /* 按钮文字颜色为白色 */
            border: none; /* 去掉按钮的边框 */
            border-radius: 4px; /* 圆角效果 */
            cursor: pointer; /* 鼠标悬停时显示为手型光标 */
            font-size: 16px; /* 按钮文字大小 */
        }

        /* 提交按钮的悬停效果 */
        input[type="submit"]:hover {
            background-color: #45a049; /* 鼠标悬停时按钮的背景颜色变深 */
        }

        /* 注册链接的样式 */
        a {
            display: block; /* 将链接设为块级元素 */
            text-align: center; /* 文字居中对齐 */
            margin-top: 15px; /* 上边距 */
            color: #007BFF; /* 链接颜色为蓝色 */
            text-decoration: none; /* 去掉链接的下划线 */
        }

        /* 注册链接的悬停效果 */
        a:hover {
            text-decoration: underline; /* 鼠标悬停时显示下划线 */
        }
    </style>
</head>
<body>
    <!-- 登录表单 -->
    <form action="/login" method="post">
        <!-- 表单标题 -->
        <h2 style="text-align: center; color: #333;">Login</h2>
        <!-- 用户名输入框 -->
        <input type="text" name="username" placeholder="用户名" required>
        <!-- 密码输入框 -->
        <input type="password" name="password" placeholder="密码" required>
        <!-- 登录按钮 -->
        <input type="submit" value="登陆">
        <!-- 注册链接 -->
        <a href="index_register">注册</a>
    </form>
</body>
</html>
